<template>
	<view>
		<view class="addAddress flex-align" @click="showAddAddress=true">
			<image src="../../static/addAddress.png" mode="aspectFill"></image>
			<label style="margin-left: 20upx;">添加收货地址</label>
		</view>
		<van-action-sheet :show="showAddAddress" title="添加地址" @click-overlay="showAddAddress=false" @close="showAddAddress=false">
			<van-field label="送货地址" :value="add.address" @input="add.address=$event.detail" />
			<van-field label="门牌号" :value="add.addressNumber" @input="add.addressNumber=$event.detail" />
			<van-field label="收货人" :value="add.name" @input="add.name=$event.detail" />
			<van-field label="手机号" type="number" :value="add.tel" @input="add.tel=$event.detail" />
			<button class="button">确认添加</button>
		</van-action-sheet>
		<van-radio-group :value="chooseDefaultAddress">
			<view class="address-item">
				<view class="address-item-title">甲级写字楼-B座 3601</view>
				<view class="address-item-info">
					<label>收货人：张三</label>
					<label style="margin-left: 64upx;">电话：16587945684</label>
				</view>
				<van-divider hairline />
				<view class="flex-between">
					<view @click="changeDefault('0')">
						<van-radio name="0" checked-color="#FBC241">设为默认</van-radio>
					</view>
					<view class="flex-between" style="width: 190upx;">
						<label style="font-size: 28upx;font-weight: 500;color: #333333;" @click="editAddressIndex=0;showEditAddress=true">编辑</label>
						<label style="font-size: 28upx;color: #F9623B;" @click="onDelete('0')">删除</label>
					</view>
				</view>
			</view>
		</van-radio-group>
		<van-action-sheet :show="showEditAddress" title="添加地址" @click-overlay="showEditAddress=false" @close="showEditAddress=false">
			<van-field label="送货地址"  />
			<van-field label="门牌号"  />
			<van-field label="收货人" />
			<van-field label="手机号" />
			<button class="button">确认修改</button>
		</van-action-sheet>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showAddAddress:false,
				add:{
					address:'',
					addressNumber:'',
					name:'',
					tel:''
				},
				chooseDefaultAddress:'0',
				showEditAddress:false,
				editAddressIndex:-1
			}
		},
		methods:{
			//切换默认地址
			changeDefault(name){
				const that=this;
				that.chooseDefaultAddress=name;
			},
			//编辑地址
			
			//删除地址
			onDelete(name){
				uni.showModal({
					title:'确认要删除此地址吗'
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	.addAddress{
		height: 40upx;
		padding: 20upx 32upx;
		margin: 20upx 0upx;
		background: #FFFFFF;
		font-size: 28upx;
		font-weight: 500;
		color: #666666;
		image{
			width: 40upx;
			height: 40upx;
		}
	}
	.address-item{
		padding: 40upx 32upx;
		background-color: #FFFFFF;
		.address-item-title{
			font-size: 28upx;
			font-weight: 400;
			color: #333333;
		}
		.address-item-info{
			margin-top: 10upx;
			font-size: 24upx;
			font-weight: 400;
			color: #666666;
		}
	}
</style>